<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>现代浏览器展览</title>
    <!-- 引入Bootstrat核心文件-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!--引入自定义样式-->
    <link rel="stylesheet" href="css/common.css">
    <!-- 可选Bootstrap主题文件-->
    <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
    <!--引入jQuery文件-->
    <script src="js/jquery-1.11.1.min.js"></script>
    <!--引入bootstrap.min.js文件-->
    <script src="js/bootstrap.min.js"></script>
    <!--百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qqWM7gt7wD8OEdSmppQMxrWP	"></script>
    <!--百度地图工具包-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
		<!--加载鼠标绘制工具-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
	<!--加载检索信息窗口-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
    <style type="text/css">
        #mymap {
            width: 100%;
            height: 400px;
            overflow: hidden;
            margin: 0px;
        }
    </style>
</head>

<body>
<div id="gotop"></div>
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!--头部-->
        <div class="navbar-header">
            <!--缩放按钮-->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false">
                <!--当页面缩放的时候显示-->
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">现代浏览器大全</a>
        </div>
        <!--导航主体-->
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav ">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#container-summary">下载</a></li>
                <!--下拉选项-->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        特点
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#features-chrome" data-toggle="tab">Chrome</a></li>
                        <li><a href="#features-firefox" data-toggle="tab">Firefox</a></li>
                        <li><a href="#features-safari" data-toggle="tab">Safari</a></li>
                    </ul>
                </li>
                <li><a href="#myPlayer" data-toggle="modal">观看视频</a></li>
                <li><a href="#myModal-clock" data-toggle="modal">时钟</a></li>
                <li><a href="#myModal-map" data-toggle="modal">关于作者</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#login" data-toggle="modal">登陆</a>
                </li>
                <li>
                    <a href="#register" data-toggle="modal">注册</a>
                </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="搜索用户" id="input_username">
                    <a href="#user_list" data-toggle="modal">
                        <button type="button" class="btn btn-default"  onclick="show();">搜索</button>
                    </a>
                </div>
            </form>
        </div>
    </div>
</nav>
<!--Modal 视频播放-->
<div class="modal fade" id="myPlayer">
    <div class="modal-dialog modal-lg" tabindex="-1">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">观看视频</h4>
            </div>
            <div class="modal-body">
                <div id="modal-body" class="col-md-8" style="padding-left: 0px;">
                    <video id="myvideo" width="600" height="360" poster="img/beforePlayImg.jpg">
                        <source src="video/videoplayback.mp4" type="video/mp4">
                        video</source>
                        当前浏览器不支持 video直接播放，点击这里下载视频： <a href="video/videoplayback.mp4">下载视频</a>
                    </video>
                    <div id="videoControls">
                        <progress id="videoProgress" max="100" value="0"></progress>
                    </div>
                    <div style="display: block">
                        <button id="btn_play" class="btn btn-sm btn-info">播放</button>
                        <button id="btn_forward" class="btn btn-sm btn-info">快放</button>
                        <button id="btn_back" class="btn btn-sm btn-info">慢放</button>
                        <button id="btn_up" class="btn btn-sm btn-info">增大音量</button>
                        <button id="btn_down" class="btn btn-sm btn-info">降低音量</button>
                        <button id="btn_silent" class="btn btn-sm btn-info">静音</button>
                        <button id="btn_fullScreen" class="btn btn-sm btn-info">全屏</button>
                        <button id="upload" class="btn btn-sm btn-warning ">上传本地视频</button>
                        <input type="file" name="file" id="file" style="display: none">
                        <br>
                        当前播放速度:<span id="rate"></span><br/>
                        当前音量:<span id="volum"></span><br/>
                        当前播放时间: <span id="current"></span><br/>

                        <div class="hidden">总时间: <span id="duration"></span></div>
                    </div>
                </div>
                <div class="col-md-4"
                     style="word-wrap: break-word;word-break: break-all;hyphens: auto;padding-left: 30px;padding-top: 10px">
                    <h4 class="modal-title">Kick with Chrome: A Chrome Experiment</h4>
                    Tap into your inner soccer champion in Kick with Chrome, a new Chrome Experiment. Choose from three
                    different games: Infinite Dribble, Space Kick, and Shootout. Then, play alone or grab up to three
                    friends to vie for the high score on the leaderboard.
                    Thanks to the latest mobile web platform technologies, your phone or tablet is always your game
                    controller in Kick with Chrome, and you can play with or without your desktop computer. Just open
                    Chrome on your Mac or Windows laptop, Android phone or tablet, iPhone or iPad and kick things off.
                    <div class="hidden-xs hidden-sm"><br><br><br><br></div>
                </div>
            </div>
            <div></div>
            <div class="modal-footer">
                <button id="close-modal-video" type="button" class="btn btn-success" data-dismiss="modal"
                        style="float: right;">Close
                </button>
            </div>
        </div>
    </div>
</div>
<!--Modal 关于作者-->
<div class="modal fade" id="myModal-map">
    <div class="modal-dialog modal-lg" tabindex="-1">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">关于作者</h4>
            </div>
            <div class="modal-body">
                大家好，我是13级移动云办公专业的吴俊川。我的学号是 <code class="">1321152232</code>，这个是我的HTML5项目考核作业。
                <div id="mymap"></div>
                <input type="input" name="search_nearby" id="search_nearby" class="form-inline"/>
                <button type="button" class="btn btn-warning btn-sm" id="submit_search">搜索</button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--时钟-->
<div class="modal fade" id="myModal-clock">
    <div class="modal-dialog modal-lg" tabindex="-1">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">关于作者</h4>
            </div>
            <div class="modal-body">
                大家好，我是13级移动云办公专业的吴俊川。我的学号是 <code class="">1321152232</code>，这个是我的HTML5项目考核作业。
                <h4>下面是自制时钟<br>
                    <small id="out"></small>
                </h4>
                <canvas id="myclock" width="300" height="300" style="background-color: #ffffff;"></canvas>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--Modal 登陆-->
<div class="modal fade" id="login">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">登陆</h4>
            </div>
            <div class="modal-body">
                <!--注册的表单-->
                <form action="" class="form-horizontal">
                    <fieldset>
                        <div class="form-group">
                            <label for="login_username" class="col-lg-3 control-label">用户名:</label>

                            <div class="col-lg-6">
                                <input type="text" class="form-control" id="login_username" placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="login_password" class="col-lg-3 control-label">密码:</label>

                            <div class="col-lg-6">
                                <input type="password" class="form-control" id="login_password" placeholder="请输入登陆密码">
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="login();">登陆</button>
            </div>
        </div>
    </div>
</div>
<!--Modal 注册-->
<div class="modal fade" id="register">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">注册</h4>
            </div>
            <div class="modal-body">
                <!--注册的表单-->
                <form action="" class="form-horizontal">
                    <fieldset>
                        <div class="form-group">
                            <label for="username" class="col-lg-3 control-label">用户名:</label>

                            <div class="col-lg-6">
                                <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-lg-3 control-label">密码:</label>

                            <div class="col-lg-6">
                                <input type="password" class="form-control" id="password" placeholder="请输入登陆密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="favorite" class="col-lg-3 control-label">最喜爱的浏览器：</label>

                            <div class="col-lg-6">
                                <select class="form-control" id="favorite">
                                    <option>Google Chrome</option>
                                    <option>Firefox</option>
                                    <option>Opera</option>
                                    <option>Safari</option>
                                    <option>Internet Explorer</option>
                                    <option>Other</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="insert()">注册</button>
            </div>
        </div>
    </div>
</div>
<!--显示用户列表-->
<div class="modal fade" id="user_list">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">查询结果</h4>
            </div>
            <div class="modal-body">
                <form action="" class="form-horizontal">
                    <fieldset>
                        <div class="form-group">
                            <label for="show_username" class="col-lg-3 control-label">用户名:</label>

                            <div class="col-lg-6">
                                <!--用户名不可以被修改-->
                                <input type="text" class="form-control" id="show_username" placeholder="请输入用户名" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="show_password" class="col-lg-3 control-label">密码:</label>

                            <div class="col-lg-6">
                                <input type="text" class="form-control" id="show_password" placeholder="请输入登陆密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="show_favorite" class="col-lg-3 control-label">最喜爱的浏览器：</label>

                            <div class="col-lg-6">
                                <select class="form-control" id="show_favorite">
                                    <option>Google Chrome</option>
                                    <option>Firefox</option>
                                    <option>Opera</option>
                                    <option>Safari</option>
                                    <option>Internet Explorer</option>
                                    <option>Other</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-danger" data-dismiss="modal" onclick="remove_user();">删除此记录</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="edit();">保存修改</button>
            </div>
        </div>
    </div>
</div>
<!--轮播-->
<div id="mycarosel" class="carousel slide visible-lg visible-md">
    <!--轮播指标-->
    <ol class="carousel-indicators">
        <li data-target="#mycarosel" data-slide-to="0" class="active"></li>
        <li data-target="#mycarosel" data-slide-to="1"></li>
        <li data-target="#mycarosel" data-slide-to="2"></li>
    </ol>
    <!--轮播项目-->
    <div class="carousel-inner">
        <div class="item active">
            <img src="img/opera-big.jpg" alt="Apple" class="carousel-img">

            <div class="carousel-caption">Opera浏览器</div>
        </div>
        <div class="item ">
            <img src="img/firefox-big.jpg" alt="Firefox" class="carousel-img">

            <div class="carousel-caption">Firefox浏览器</div>
        </div>
        <div class="item ">
            <img src="img/chrome-big.jpg" alt="Chrome" class="carousel-img">

            <div class="carousel-caption">Chrome浏览器</div>
        </div>
    </div>
    <!--左右-->
    <a class="left carousel-control" href="#mycarosel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control " href="#mycarosel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<!--Main-->
<div class="containner" id="container-summary">
    <div class="row" id="container-summary-row">
        <div class="col-md-4 column" draggable="true">
            <img class="img-small-logo" src="img/chrome-logo-small.jpg" alt="chrome">

            <h2>Chrome</h2>

            <p>Google Chrome，又称Google浏览器，是一个由Google公司开发的网页浏览器。内核基于WebKit，拥有最先进的V8引擎</p>
            <a class="btn btn-info" href="https://www.google.com/chrome/">点击下载</a>
        </div>
        <div class="col-md-4 column" draggable="true">
            <img class="img-small-logo" src="img/firefox-logo-small.jpg" alt="firefox">

            <h2>Firefox</h2>

            <p>Mozilla Firefox，中文俗称“火狐”,是一个自由及开放源代码网页浏览器，使用Gecko排版引擎，支持多种操作系统等。</p>
            <a class="btn btn-info " href="http://www.firefox.com.cn/">点击下载</a>
        </div>
        <div class="col-md-4 column" draggable="true">
            <img class="img-small-logo" src="img/safari-logo-small.jpg" alt="safari">

            <h2>Safari</h2>

            <p>Safari 以惊人速度渲染网页。与 Mac、PC 及 iPod touch 完美兼容。让最爱网站一目了然。聪明的它还会检查拼写和语法。</p>
            <a class="btn btn-danger disabled">暂无提供下载</a>
        </div>
    </div>
    <hr class="hr-division">
    <!--分割线-->
</div>
<!--特性-->
<div class="containner features">
    <!--标签页-->
    <ul class="nav nav-tabs">
        <li class="active"><a href="#features-chrome" data-toggle="tab">Chrome</a></li>
        <li class=""><a href="#features-firefox" data-toggle="tab">Firefox</a></li>
        <li class=""><a href="#features-safari" data-toggle="tab">Safari</a></li>
    </ul>

    <div class="tab-content">
        <!--介绍chrome-->
        <div class="tab-pane fade in active" id="features-chrome">
            <div class="row">
                <div class="col-md-7">
                    <h2 class="features-text-title">
                        Google Chrome<br/>
                        <span class="text-muted features-text-muted">最牛逼的浏览器</span>
                    </h2>

                    <p class="features-text-article">Google
                        Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
                    </p>
                </div>
                <div class="col-md-5">
                    <img src="img/chrome-logo.jpg" alt="chrome" class="features-img">
                </div>
            </div>
        </div>
        <!--Firefox-->
        <div class="tab-pane fade" id="features-firefox">
            <div class="row">
                <!--在只有在大屏幕下才显示-->
                <div class="col-md-5 hidden-xs hidden-sm">
                    <img src="img/firefox-logo.jpg" alt="firefox" class="features-img">
                </div>
                <div class="col-md-7">
                    <h2 class="features-text-title">
                        Mozilla Firefox<br/>
                        <span class="text-muted features-text-muted">快、安全</span>
                    </h2>

                    <p class="features-text-article">
                        Mozilla Firefox，又称Firefox浏览器，是一个自由及开放源代码网页浏览器，使用Gecko排版引擎，支持多种操作系统。Firefox连续三年成为互联网用户最受信赖的浏览器
                    </p>
                </div>
                <!-- 只有在小屏幕下才显示-->
                <div class="col-md-5 visible-xs visible-sm">
                    <img src="img/firefox-logo.jpg" alt="firefox" class="features-img">
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="features-safari">
            <div class="row">
                <div class="col-md-7">
                    <h2 class="features-text-title">
                        Safari<br/>
                        <span class="text-muted features-text-muted">苹果自家系统的开挂者</span>
                    </h2>

                    <p class="features-text-article">
                        Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。
                    </p>
                </div>
                <div class="col-md-5">
                    <img src="img/safari-logo.jpg" alt="safari" class="features-img">
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <footer>
            <p style="float: left">&copy;2015 13级移动班吴俊川</p>

            <p class="pull-right"><a href="#top">返回顶部</a></p>
        </footer>
    </div>
</div>
<!--百度地图-->
<script src="js/map.js"></script>
<!--返回顶部-->
<script src="js/backTop.js"></script>
<!--引入拖动-->
<script src="js/drag_drop.js"></script>
<!--引入时钟-->
<script src="js/clock.js"></script>
<!--webSql-->
<script src="js/webSql.js"></script>
<!--播放器相关API-->
<script src="js/initialize.js"></script>
<script src="js/player.js"></script>
</body>
</html>
